<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title id="t1">12-watch实现 长度换算</title>
</head>

<body>

	<div id="app1" class="capp1">
		千米：<input type="text" v-model="kilometers" placeholder="千米" accept="number">
		米&nbsp;：<input type="text" v-model="meters" placeholder="米" accept="number">
	</div>
	<span id="sp1"></span>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var data = { 
				kilometers: 0,
				meters: 0
			}
		// new Vue({}) 大小写敏感
		var app = new Vue({
			el: "#app1",
			data: data,
			methods: {
				
			},
			watch:{
				kilometers: function (val) {
					this.kilometers = val
					this.meters = val*1000
				},
				meters: function (val) {
					this.meters = val
					this.kilometers = val / 1000
				}
			}
			
		})

		app.$watch('kilometers',function(nval,oval){
			document.getElementById("sp1").innerHTML = "变化：" + oval + "~" + nval;
		})
	</script>

</body>

</html>